<template>
	<view class="list">
		<!-- <nav-bar class="i_top" isBack>
			<view class="i_tCan" slot="center">
				<view :class="{active:type == 0}" @click="tabtop(0)">图文<text></text></view>
				<view :class="{active:type == 1}" @click="tabtop(1)">视频<text></text></view>
			</view>
		</nav-bar> -->
		<nav-bars class="i_top" bgColor="#fff" fontColor="#000">
			<view class="i_tCan" slot="default">
				<view :class="{active:type == 0}" @click="tabtop(0)">图文<text></text></view>
				<view v-if="mediaShow" :class="{active:type == 1}" @click="tabtop(1)">视频<text></text></view>
			</view>
		</nav-bars>
		<!-- 数据列表 -->
		<view class="l_data">
			<view class="l_dContain">
				<view class="l_dCan">
					<!-- 设计动态 -->
					<view class="l_dList">
						<view class="l_dDyna">
							<view class="l_ddItem" v-for="(item, index) in list" :key="index">
								<view class="l_ddUser" @tap="toDetail(item.id)">
									<view class="l_ddHead">
										<image :src="item.user_id.avatar.path"></image>
									</view>
									<view class="l_ddCan">
										<view class="l_ddName">{{item.user_id.username ||'***'}}</view>
										<view class="l_ddTime">{{item.create_time | formatDate}}</view>
									</view>
								</view>
								<view class="l_ddTags" @tap="toDetail(item.id)">
									<view class="l_ddTag">
										<view class="l_ddTag-icon">
											<image src="/static/common/icon_topic.png"></image>
										</view>
										<text>{{item.title}}</text>
									</view>
								</view>
								<view class="l_ddCont">
									<view class="l_ddText" @tap="toDetail(item.id)">
										<view class="omit-3">{{item.content}}</view>
										<view class="l_ddAll" v-if="item.content.length > 100">全文</view>
									</view>
									<view class="l_ddImgs" v-if="item.type == 0" @tap="toDetail(item.id)">
										<view v-if="indexc<9" v-for="(items,indexc) in item.media" :key="indexc"
											@tap.stop="preview(indexc,item.media)">
											<view class="l_ddImg">
												<image :src="items.path"></image>
											</view>
										</view>
									</view>
									<view class="l_ddImgs" v-if="item.type == 1">
										<view v-for="(items,indexc) in item.media" :key="indexc">
											<view class="l_ddImg">
												<video style="width: 220rpx;height: 220rpx;" id="myVideo"
													:src="items.path" controls></video>
											</view>
										</view>
									</view>
								</view>
								<view class="l_funs">
									<view class="l_fun" @click="popShareToPicture(item.id)">
										<view class="l_fIcon iconfont icon-transpond"></view>
										<text>转发</text>
									</view>
									<view class="l_fun" @tap.stop="dyna_showComment(item)">
										<view class="l_fIcon iconfont icon-comments"></view>
										<text>{{item.comment_num}}</text>
									</view>
									<view class="l_fun" @click="trendStore(item,index)">
										<view class="l_fIcon" v-if="item.support_status == 1">
											<image src="/static/common/icon_collection.png"></image>
										</view>
										<view class="l_fIcon" v-else>
											<image src="/static/common/icon_collection2.png"></image>
										</view>
										<text>{{item.support_num}}</text>
									</view>
								</view>
							</view>
							<view style="text-align: center;padding: 40rpx; color: #999;">没有更多了</view>
						</view>
					</view>
				</view>
			</view>
		</view>

		<!-- 弹窗 - 评论 -->
		<view class="p_evalute" :class="{'active': commentPop}" @touchmove.stop.prevent="moveHandle">
			<view class="p_eBg"></view>
			<view class="p_eBox">
				<view class="p_eShim" @tap="commentPop = false"></view>
				<view class="p_eContain">
					<view class="p_eClose" @tap="commentPop = false">
						<view class="iconfont icon-cancel"></view>
					</view>
					<view class="p_eTitle">共{{trend_idnum}}条评论</view>
					<scroll-view class="p_eList" scroll-y @scrolltolower="dync_commentNext">
						<view v-for="comment in commentList" :key="comment.id">
							<view class="p_eItem">
								<view class="p_eHead" v-if="comment.user_id.avatar.path">
									<image :src="comment.user_id.avatar.path"></image>
								</view>
								<view class="p_eHead" v-else>
									<image src="https://manager.ryz1620.com/static/my/avator.png"></image>
								</view>
								<view class="p_eCont">
									<view @tap="dync_commentSelectReply(comment.id, comment.user_id.username)">
										<view class="p_eName">{{comment.user_id.username}}
											<!-- <view class="p_eAuth">作者</view> -->
										</view>
										<view class="p_eTxt">{{comment.content}}</view>
										<view class="p_eTxt">
											<view class="p_eTip" style="padding-left: 0;">{{comment.createTime}}</view>
											<view class="p_eTip" @tap.top="getcommentdel(comment.id)"
												v-if="comment.user_id.id == useid">删除</view>
											<view class="p_eTip" v-else style="color: #333;">回复</view>
										</view>
									</view>
									<view class="p_eIts">
										<view v-for="reply in comment.sub_reply">
											<view class="p_eiItem"
												@tap="dync_commentSelectReply(reply.id, reply.user_id.username)">
												<view class="p_eiHead" v-if="reply.user_id.avatar.path">
													<image :src="reply.user_id.avatar.path"></image>
												</view>
												<view class="p_eHead" v-else>
													<image src="https://manager.ryz1620.com/static/my/avator.png"></image>
												</view>
												<view class="p_eiCont">
													<view class="p_eiName">{{reply.user_id.username}}</view>
													<view class="p_eiTxt">
														<view v-if="reply.isReplay"
															style="color: #666; font-size: 20rpx;">
															回复<text
																class="p_eiReply">{{reply.reply_id.username}}</text>：
														</view>
														{{reply.content}}
													</view>
													<view class="p_eiTxt">
														<view class="p_eiTip">{{reply.createTime}}</view>
														<view class="p_eiTip" @tap.top="getcommentdel(reply.id)"
															v-if="reply.user_id.id == useid">删除</view>
														<view class="p_eiTip" v-else style="color: #333;">回复</view>
													</view>

												</view>
											</view>
										</view>
									</view>
								</view>
							</view>
						</view>
					</scroll-view>
					<view class="p_eReply">
						<view class="p_erSend" v-if="!commentIsReply" @click="dync_comment">发送</view>
						<view class="p_erSend" v-else @click="dync_commentReply">发送</view>
						<view class="p_erInput">
							<!-- <view class="p_erIcon"><view class="iconfont icon-brow"></view></view> -->
							<input type="text" placeholder-class="placeholder" :focus="commentFocus" v-model="content"
								:placeholder="commentReplyName ? '回复 @' + commentReplyName + ':' : '评论一下吧~'"
								@confirm="dync_comment" @input="inputKey($event, 'comment')" />
						</view>
					</view>
				</view>
			</view>
		</view>

	</view>
</template>

<script>
	import service_design from '@/service/team.js'
	import LivePlayer from '@/service/player.js'
	export default {
		data() {
			return {
				list: [],
				currentPage: 1,
				designerId: '',
				keyword: '',
				commentPop: false,
				commentPage: 0,
				commentLoading: false,
				trend_id: '',
				trend_idnum: '',
				commentTime: 0,
				commentList: [],
				content: '',
				useid: '',
				commentIsReply: false,
				commentReplyId: '',
				commentReplyName: '',
				type: 0,
				mediaShow:false, //是否展示动态视频模块
			}
		},

		components: {
		},

		onLoad(params) {
			this.$utils.getUrl()
			// testcode
			this.designerId = params.designerId
			console.log(this.designerId)
			this.getList()
		},
		onShow() {
			this.getLvieConfig()
		},
		onReachBottom() {
			this.currentPage++
			this.getList()
		},
		filters: {
			formatDate(value) {
				let date = new Date(parseInt(value) * 1000);
				let y = date.getFullYear();
				let m = date.getMonth() + 1;
				m = m < 10 ? "0" + m : m;
				let d = date.getDate();
				d = d < 10 ? "0" + d : d;
				let h = date.getHours();
				h = h < 10 ? "0" + h : h;
				let minute = date.getMinutes();
				let second = date.getSeconds();
				minute = minute < 10 ? "0" + minute : minute;
				second = second < 10 ? "0" + second : second;
				return y + "-" + m + "-" + d + " " + h + ":" + minute + ":" + second;
			}
		},
		methods: {
			//直播配置开关(动态视频开关)
			getLvieConfig() {
				LivePlayer.getLvieConfig()
					.then(res => {
						if (res.code === 1) {
							console.log(res.data);
							if (res.data.value == 0) {
								this.mediaShow = false
							} else {
								this.mediaShow = true
							}
						} else {
						}
					})
					.catch(err => {
						console.log(err);
					});
			},
			tabtop(e) {
				this.type = e
				this.currentPage = 1
				this.list = []
				this.getList()
			},
			getList() {
				let params = {
					partner_id: this.designerId,
					partner_type: 'builder',
					page: this.currentPage,
					type: this.type
				}
				service_design.getDyncList(params)
					.then(res => {
						if (res.code == 1) {
							let data = res.data
							for (var i = 0; i < data.length; i++) {
								this.list.push(data[i]); // 加载的数据追加在上一页后面
							}
						}
					})
					.catch(err => {

					})
			},
			// 动态点赞
			trendStore(item, index) {
				let status = item.support_status
				if (status == 1) {
					uni.showModal({
						title: '提示',
						content: '确认取消点赞?',
						success: (res) => {
							if (res.confirm) {
								service_design.gitTrendstatus({
										trend_id: item.id,
										status: 0
									})
									.then(res => {
										if (res.code == 1) {
											this.list[index].support_status = 0
											this.list[index].support_num--
										} else {
											this.$utils.showErr({
												title: res.msg
											})
										}
									})
							} else if (res.cancel) {
								return
							}
						}
					});
				} else {
					service_design.gitTrendstatus({
							trend_id: item.id,
							status: 1
						})
						.then(res => {
							if (res.code == 1) {
								this.list[index].support_status = 1
								this.list[index].support_num++
							} else {
								this.$utils.showErr({
									title: res.msg
								})
							}
						})

				}

			},
			// 预览图片
			preview(index, urls) {
				let img_url = []
				for (let i = 0; i < urls.length; i++) {
					img_url.push(
						urls[i].path
					);
				}
				uni.previewImage({
					urls: img_url,
					current: index,
					longPressActions: {
						itemList: ['发送给朋友', '保存图片', '收藏'],
						success: function(data) {
							console.log('选中了第' + (data.tapIndex + 1) + '个按钮,第' + (data.index + 1) + '张图片');
						},
						fail: function(err) {
							console.log(err.errMsg);
						}
					}
				});
			},
			previews(urls) {
				let img_url = []
				img_url.push(
					urls
				);
				uni.previewImage({
					urls: img_url,
					longPressActions: {
						itemList: ['发送给朋友', '保存图片', '收藏'],
						success: function(data) {
							console.log('选中了第' + (data.tapIndex + 1) + '个按钮,第' + (data.index + 1) + '张图片');
						},
						fail: function(err) {
							console.log(err.errMsg);
						}
					}
				});
			},
			// 输入框输入内容事件
			inputKey(event, key) {
				this[key] = event.detail.value
			},
			// 跳转-海报页面
			// 跳转-海报页面
			popShareToPicture(id) {
				uni.navigateTo({
					url: '/pages_two/pages/construction/dynamic/share?trendId=' + id
				})
			},
			moveHandle() {},
			// 展示设计动态的评论框
			dyna_showComment(item) {
				this.trend_id = item.id
				this.trend_idnum = item.comment_num
				this.commentPage = 0
				this.commentPop = true
				this.commentLoading = false
				this.commentList = []
				this.dyna_getComment()
			},
			// 获取设计动态的评价内容
			dyna_getComment() {
				if (!this.commentLoading) {
					this.commentLoading = true
					this.commentTime++
					let commentTime = this.commentTime
					let commentPage = this.commentPage + 1
					console.log(commentPage)
					// 获取评论数据
					service_design.getCommentList({
							trend_id: this.trend_id,
							page: commentPage
						})
						.then(res => {
							if (this.commentTime === commentTime) {
								this.commentLoading = false

								if (res.code == 1) {
									let data = res.data
									let list = this.commentList || []
									// 处理数据
									let nowTime = Date.now()
									for (let i = 0; i < data.length; i++) {
										data[i].create_time *= 1000
										data[i].createTime = this.$utils.getDateDiff(data[i].create_time)
										// 处理回复数据
										let replayList = data[i].sub_reply
										if (replayList && replayList.length) {
											for (let j = 0; j < replayList.length; j++) {
												replayList[j].create_time *= 1000
												replayList[j].createTime = this.$utils.getDateDiff(replayList[j]
													.create_time, )

												// 是否是回复 回复数据 的数据
												if (data[i].id !== replayList[j].parent_id) replayList[j].isReplay =
													true
											}
										}
										// 保存数据
										list.push(data[i])
									}

									this.commentPage++
									this.commentList = list
								}
							}
						})
						.catch(err => {
							if (this.commentTime === commentTime) {
								this.commentLoading = false
							}
						})
				}
			},
			// 评论
			dync_comment() {
				let content = this.content
				service_design.getcomment({
						trend_id: this.trend_id,
						content: content
					})
					.then(res => {
						if (res.code == 1) {
							this.currentPage = 1
							this.commentPage = 0
							this.commentList = []
							this.list = []
							this.trend_idnum++
							this.content = ''
							this.dyna_getComment()
							this.getList()
						}
					})
					.catch(err => {

					})
			},
			// 回复他人评论
			dync_commentSelectReply(id, name) {
				this.commentIsReply = true
				this.commentReplyId = id
				this.commentReplyName = name
				this.content = ''
			},
			// 发布回复评论
			dync_commentReply() {
				service_design.getcommentreply({
						comment_id: this.commentReplyId,
						content: this.content
					})
					.then(res => {
						if (res.code == 1) {
							this.commentIsReply = false
							this.commentPage = 0
							this.commentList = []
							this.content = ''
							this.commentReplyId = ''
							this.commentReplyName = ''
							this.currentPage = ''
							this.list = []
							this.dyna_getComment()
						} else {
							uni.showModal({
								title: '提示',
								content: res.msg,
								showCancel: false,
								success(res) {
									if (res.confirm) {
										// console.log('用户点击确定')
										this.content = ''
										// content = ''
									}
								}
							})
						}
					})
					.catch(err => {

					})
			},
			// 获取更多评论内容
			dync_commentNext(e) {
				if (!this.commentLoading) {
					this.dyna_getComment()
				}
			},
			// 删除评论
			getcommentdel(id) {
				uni.showModal({
					title: '提示',
					content: '确认删除评论?',
					success: (res) => {
						if (res.confirm) {
							service_design.getcommentdel({
									comment_id: id
								})
								.then(res => {
									if (res.code == 1) {
										this.currentPage = 1
										this.commentPage = 0
										this.commentList = []
										this.trend_idnum--
										this.content = ''
										this.list = []
										this.dyna_getComment()
										this.getList()
									} else {
										this.$utils.showErr({
											title: res.msg
										})
									}
								})
						} else if (res.cancel) {
							return
						}
					}
				});
			},
			toDetail(trendId) {
				uni.navigateTo({
					url: '/pages_design/pages/design/dynamic/dynamic?trendId=' + trendId
				})
			}
		}
	}
</script>

<style lang="scss" scoped>
	// 数据列表（案例、动态、评价）=====
	.list .l_data {
		padding-bottom: constant(safe-area-inset-bottom);
		padding-bottom: env(safe-area-inset-bottom);
	}

	// 数据列表
	.list .l_data .l_dList {
		background: #fff;
	}

	.list .i_top {
		position: relative;
		z-index: 100;

		.i_tCan {
			width: 100%;
			height: 66rpx;
			padding-left: 50rpx;
			padding-right: 50rpx;

			view {
				display: inline-block;
				width: 50%;
				text-align: center;
				line-height: 66rpx;
				position: relative;
				color: #333;
				font-size: 30rpx;
				margin: 0 10rpx;
			}

			.active {
				text {
					position: absolute;
					bottom: 0;
					left: 50%;
					margin-left: -20rpx;
					display: block;
					width: 40rpx;
					height: 8rpx;
					border-radius: 8rpx;
					background: #FFD425;
				}
			}
		}

	}

	// 设计动态 底线
	.list .l_data .l_dDyna .l_ddItem {
		position: relative;

		&::after {
			content: "";
			height: 1px;
			background: #f4f4f4;
			position: absolute;
			bottom: 0;
			left: 32rpx;
			right: 32rpx;
			transform: scaleY(.5);
		}

		&:nth-last-child(1)::after {
			content: none;
		}
	}

	// 设计动态
	.list .l_data .l_dDyna {
		.l_ddItem {
			padding-top: 40rpx;
		}

		// 用户信息
		.l_ddUser {
			padding: 0 32rpx;
		}

		.l_ddHead {
			width: 84rpx;
			height: 84rpx;
			margin-right: 20rpx;
			border-radius: 50%;
			background: #f0f0f0;
			overflow: hidden;
			float: left;
		}

		.l_ddCan {
			padding-top: 6rpx;
			overflow: hidden;
		}

		.l_ddName {
			height: 40rpx;
			line-height: 40rpx;
			font-weight: bold;
		}

		.l_ddTime {
			height: 34rpx;
			line-height: 34rpx;
			color: #939393;
			font-size: 24rpx;
		}

		// 标签
		.l_ddTags {
			margin: 18rpx 32rpx 0;
			overflow: hidden;
		}

		.l_ddTag {
			height: 44rpx;
			line-height: 44rpx;
			color: #a58f6d;
			font-size: 24rpx;
			padding: 0 20rpx 0 48rpx;
			border-radius: 22rpx;
			background: #f9f6f3;
			position: relative;
			float: left;
		}

		.l_ddTag-icon {
			width: 36rpx;
			height: 36rpx;
			position: absolute;
			top: 4rpx;
			left: 4rpx;
		}

		// 内容
		.l_ddText {
			line-height: 44rpx;
			margin: 28rpx 36rpx 0;
		}

		.l_ddAll {
			height: 36rpx;
			line-height: 36rpx;
			color: #a98f68;
			font-size: 26rpx;
			margin-top: 8rpx;
		}

		.l_ddImgs {
			padding: 18rpx 0 0 32rpx;
			overflow: hidden;
		}

		.l_ddImg {
			width: 220rpx;
			height: 220rpx;
			margin: 12rpx 14rpx 0 0;
			border-radius: 4rpx;
			background: #f0f0f0;
			overflow: hidden;
			float: left;
		}

		// 底部功能键
		.l_funs {
			padding: 20rpx 32rpx 22rpx;
			display: flex;
		}

		.l_fun {
			height: 74rpx;
			display: flex;
			flex: 1;
			justify-content: center;
			align-items: center;

			&:nth-child(1) {
				justify-content: flex-start;
			}

			&:nth-last-child(1) {
				justify-content: flex-end;
			}
		}

		.l_fIcon {
			width: 40rpx;
			height: 40rpx;
			line-height: 40rpx;
			color: #6c6c6c;
			font-size: 40rpx;
			margin-right: 16rpx;
			display: inline-block;
		}
	}

	// 弹窗-规格
	.Size {
		width: 100vw;
		height: 100vh;
		position: fixed;
		top: 0;
		left: 0;
		z-index: 1001;

		.S_bg {
			width: 100%;
			height: 100%;
			background: rgba(0, 0, 0, .8);
		}

		.S_box {
			width: 100%;
			height: 100%;
			position: absolute;
			top: 0;
			left: 0;
			display: flex;
			flex-flow: column;
		}

		.S_bCloak {
			height: 176rpx;
		}

		.S_bContain {
			border-radius: 24rpx 24rpx 0 0;
			background: #fff;
			position: relative;
			overflow: hidden;
			display: flex;
			flex-flow: column;
			flex: 1;
		}

		.S_bClose {
			width: 104rpx;
			height: 120rpx;
			position: absolute;
			top: 0;
			right: 0;
			display: flex;
			justify-content: center;
			align-items: center;

			.S_bcIcon {
				width: 40rpx;
				height: 40rpx;
				line-height: 40rpx;
				text-align: center;
				color: #000;
				font-size: 20rpx;
				border-radius: 50%;
				background: #f9f6f3;
			}
		}

		.S_bInfo {
			padding: 36rpx 32rpx 20rpx;

			.S_biHead {
				width: 178rpx;
				height: 178rpx;
				margin-right: 24rpx;
				border-radius: 10rpx;
				background: #f0f0f0;
				box-shadow: 0 4rpx 4rpx 0 rgba(136, 136, 136, .16);
				overflow: hidden;
				float: left;
			}

			.S_biCan {
				overflow: hidden;
			}

			.S_biFee {
				height: 60rpx;
				line-height: 60rpx;
				color: #e9423e;
				font-size: 32rpx;
				font-weight: bold;
				margin-top: 32rpx;

				&>text {
					font-size: 44rpx;
				}
			}

			.S_biTip {
				height: 40rpx;
				line-height: 40rpx;
				color: #e9423e;
				font-size: 20rpx;
				margin-top: 10rpx;
				border-radius: 4rpx;
				display: inline-block;

				.yprice {
					margin-left: 0;
				}
			}

			.S_biRemark {
				height: 28rpx;
				line-height: 28rpx;
				color: #939393;
				font-size: 20rpx;
				margin-top: 10rpx;
			}
		}

		.S_bConfig {
			overflow: hidden;
			flex: 1;

			.S_bcCan {
				padding: 0 34rpx 146rpx;
			}

			.S_bcGroup {
				padding-top: 40rpx;
				position: relative;

				&:first-child {
					padding-top: 20rpx;
				}
			}

			.S_bcTit {
				height: 40rpx;
				line-height: 40rpx;
				font-weight: bold;
				overflow: hidden;
				text-overflow: ellipsis;
				white-space: nowrap;
			}

			.S_bcChecks {
				padding-top: 8rpx;
			}

			.S_bcCheck {
				height: 42rpx;
				line-height: 42rpx;
				color: #939393;
				font-size: 24rpx;
				padding: 0 26rpx;
				margin: 16rpx 16rpx 0 0;
				border-radius: 22rpx;
				background: #f5f5f5;
				display: inline-block;

				&.checked {
					color: #e9423e;
					background: #feeff2;
				}
			}

			.S_bcNums {
				height: 48rpx;
				position: absolute;
				top: 36rpx;
				right: -22rpx;
				display: flex;
			}

			.S_bcNum {
				width: 72rpx;
				height: 48rpx;
				line-height: 48rpx;
				text-align: center;
				border-radius: 8rpx;
				background: #f6f7fb;
			}

			.S_bcMinus,
			.S_bcAdd {
				width: 72rpx;
				height: 48rpx;
				position: relative;
			}

			.S_bcMinus::before,
			.S_bcAdd::before,
			.S_bcAdd::after {
				content: "";
				width: 24rpx;
				height: 4rpx;
				border-radius: 4rpx;
				background: #333;
				position: absolute;
				top: 50%;
				left: 50%;
				transform: translate(-50%, -50%);
			}

			.S_bcAdd::after {
				width: 4rpx;
				height: 24rpx;
			}
		}

		.S_bBtns {
			height: 86rpx;
			color: #fff;
			font-weight: bold;
			padding: 20rpx 48rpx 0;
			border-top: 1px solid #f8f6f3;
			background: #fff;
			position: absolute;
			bottom: 0;
			left: 0;
			right: 0;
			box-sizing: content-box;
			display: flex;
			justify-content: space-between;
			padding-bottom: constant(safe-area-inset-bottom);
			padding-bottom: env(safe-area-inset-bottom);

			.S_bbBtn1,
			.S_bbBtn2 {
				width: 294rpx;
				height: 72rpx;
				line-height: 72rpx;
				text-align: center;
				border-radius: 8rpx;
				background: #c3ab7c;

				&:active {
					opacity: .88;
				}
			}

			.S_bbBtn2 {
				background: #333;
			}
		}
	}

	// 弹窗 - 评论=====
	// 动画效果：
	// 画板，隐藏阶段，.3s后隐藏画板
	// 背景：.3s时间，【显示】opacity(0 -> 1) 【隐藏】opacity(1 -> 0)
	// 弹窗：.3s时间，【显示】transform: translateY(0) 【隐藏】transform: translateY(100%)
	.list .p_evalute {
		width: 100vw;
		height: 100vh;
		position: fixed;
		top: 0;
		left: 0;
		z-index: 1001;
		visibility: hidden;
		transition: visibility .3s;

		&.active {
			visibility: visible;

			.p_eBg {
				opacity: 1;
			}

			.p_eContain {
				transform: translateY(0);
			}
		}

		.p_eBg {
			width: 100%;
			height: 100%;
			background: rgba(0, 0, 0, .6);
			transition: opacity .3s;
			opacity: 0;
		}

		.p_eBox {
			width: 100%;
			height: 100%;
			position: absolute;
			top: 0;
			left: 0;
			display: flex;
			flex-flow: column;
		}

		.p_eShim {
			height: 256rpx;
		}

		.p_eContain {
			padding-bottom: constant(safe-area-inset-bottom);
			padding-bottom: env(safe-area-inset-bottom);
			border-radius: 24rpx 24rpx 0 0;
			background: #fff;
			position: relative;
			overflow: hidden;
			display: flex;
			flex-flow: column;
			flex: 1;
			transition: transform .3s;
			transform: translateY(100%);
		}

		.p_eClose {
			width: 104rpx;
			height: 120rpx;
			line-height: 120rpx;
			text-align: center;
			font-size: 40rpx;
			position: absolute;
			top: 0;
			right: 0;
		}

		.p_eTitle {
			height: 120rpx;
			line-height: 120rpx;
			text-align: center;
			font-weight: bold;
		}

		// 评论
		.p_eList {
			padding-left: 32rpx;
			padding-bottom: 112rpx;
			overflow-y: auto;
			flex: 1;
		}

		.p_eCan {
			height: 100%;
		}

		.p_eItem {
			margin-top: 30rpx;

			&:nth-child(1) {
				margin-top: 20rpx;
			}

			&:nth-last-child(1) .p_eCont::after {
				content: none;
			}
		}

		.p_eHead,
		.p_eIts .p_eiHead {
			width: 66rpx;
			height: 66rpx;
			margin-right: 16rpx;
			border-radius: 50%;
			background: #f0f0f0;
			float: left;

			image {
				border-radius: 50%;
			}
		}

		.p_eCont {
			padding-bottom: 28rpx;
			position: relative;
			overflow: hidden;

			&::after {
				content: "";
				width: 100%;
				height: 1px;
				background: #f4f4f4;
				position: absolute;
				bottom: 0;
				left: 0;
				transform: scaleY(.5);
			}
		}

		.p_eName,
		.p_eIts .p_eiName {
			height: 28rpx;
			line-height: 28rpx;
			color: #939393;
			font-size: 20rpx;
		}

		.p_eAuth,
		.p_eIts .p_eiAuth {
			width: 64rpx;
			height: 28rpx;
			line-height: 28rpx;
			text-align: center;
			color: #333;
			font-size: 20rpx;
			margin-left: 8rpx;
			border-radius: 28rpx;
			background: #f6f7fb;
			display: inline-block;
		}

		.p_eTxt,
		.p_eIts .p_eiTxt {
			min-height: 34rpx;
			line-height: 34rpx;
			font-size: 24rpx;
			padding-right: 32rpx;
			margin-top: 4rpx;
		}

		.p_eTip,
		.p_eIts .p_eiTip {
			color: #939393;
			font-size: 20rpx;
			padding-left: 16rpx;
			display: inline-block;
		}

		// 他人回复
		.p_eiItem {
			margin-top: 16rpx;
		}

		.p_eiCont {
			overflow: hidden;
		}

		.p_eiReply {
			color: #939393;
			font-size: 20rpx;
			padding: 0 4rpx;
		}

		// 回复框
		.p_eReply {
			width: 100%;
			height: 112rpx;
			padding-left: 32rpx;
			background: #fff;
			position: absolute;
			bottom: 0;
			left: 0;
			box-shadow: 0 0 20rpx 0 rgba(0, 0, 0, .1);

			.p_erSend {
				width: 108rpx;
				height: 112rpx;
				line-height: 112rpx;
				color: #939393;
				padding-left: 16rpx;
				float: right;
			}

			.p_erInput {
				height: 64rpx;
				margin-top: 24rpx;
				border-radius: 32rpx;
				background: #f6f7fb;
				position: relative;
				overflow: hidden;

				&>input {
					width: 100%;
					height: 100%;
					padding: 0 88rpx 0 28rpx;
				}
			}

			.p_erIcon {
				width: 88rpx;
				height: 64rpx;
				line-height: 64rpx;
				color: #6c6c6c;
				font-size: 48rpx;
				text-align: center;
				position: absolute;
				top: 0;
				right: 0;
			}
		}

		// 回复框
		// .p_eReply {width: 100%;height: 112rpx;background: #fff;position: absolute;bottom: 0;left: 0;box-shadow: 0 0 20rpx 0 rgba(0, 0, 0, .1);
		// 	.p_erCan {height: 64rpx;margin: 24rpx 108rpx 0 32rpx;border-radius: 32rpx;background: #f6f7fb;}
		// 	.p_erInput {width: 100%;height: 100%;padding: 24rpx 196rpx 24rpx 60rpx;position: absolute;left: 0;top: 0;z-index: 1;}
		// 	.p_erIcon {width: 88rpx;height: 112rpx;line-height: 112rpx;color: #6c6c6c;font-size: 48rpx;text-align: center;position: absolute;top: 0;right: 108rpx;z-index: 3;}
		// 	.p_erSend {width: 108rpx;height: 112rpx;line-height: 112rpx;color: #939393;padding-left: 16rpx;position: absolute;top: 0;right: 0;z-index: 2;}
		// }
	}
</style>
